<template>
	<div class="wrapper">
	  <!-- header部分 -->
	  <header>
		<p>确认订单</p>
	  </header>
  
	  <!-- 订单信息部分 -->
	  <div class="order-info">
		<h5>订单配送至：</h5>
		<div class="order-info-address" @click="toUserAddress">
		  <p>
			{{
			  deliveryaddress != null ? deliveryaddress.address : "请选择送货地址"
			}}
		  </p>
		  <i class="fa fa-angle-right"></i>
		</div>
		<p>
		  {{ user.userName }}{{ user.userSex == 1 ? "先生" : "女士" }}
		  {{ user.userId }}
		</p>
	  </div>
  
	  <h3>{{ business.businessName }}</h3>
  
	  <!-- 订单明细部分 -->
	  <ul class="order-detailed">
		<li v-for="item in cartArr" :key="item.cartId">
		  <div class="order-detailed-left">
			<img :src="item.food.foodImg" />
			<p>{{ item.food.foodName }} x {{ item.quantity }}</p>
		  </div>
		  <p>&#165;{{ item.food.foodPrice * item.quantity }}</p>
		</li>
	  </ul>
	  <div class="order-deliveryfee">
		<p>配送费</p>
		<p>&#165;{{ business.deliveryPrice }}</p>
	  </div>
  
	  <!-- 合计部分 -->
	  <div class="total">
		<div class="total-left">&#165;{{ totalPrice }}</div>
		<div class="total-right" @click="toPayment">去支付</div>
	  </div>
	</div>
  </template>
  
  <script setup>
  import qs from "qs";
  import { useRouter, useRoute } from "vue-router";
  import { ref, computed, inject } from "vue";
  import { getSessionStorage, getLocalStorage } from "../common.js";
  
  const axios = inject("axios");
  const router = useRouter();
  const route = useRoute();
  
  const user = getSessionStorage("user");
  const deliveryaddress = getLocalStorage(user.userId);
  const businessId = route.query.businessId;
  const business = ref({});
  const cartArr = ref([]);
  
  const totalPrice = computed(() => {
	let totalPrice = 0;
	for (let cartItem of cartArr.value) {
	  totalPrice += cartItem.food.foodPrice * cartItem.quantity;
	}
	totalPrice += business.value.deliveryPrice;
	return totalPrice;
  });
  
  const init = () => {
	//查询当前商家
	axios
	  .post(
		"BusinessController/getBusinessById",
		qs.stringify({
		  businessId: businessId,
		})
	  )
	  .then((response) => {
		business.value = response.data;
	  })
	  .catch((error) => {
		console.error(error);
	  });
  
	//查询当前用户在购物车中的当前商家食品列表
	axios
	  .post(
		"CartController/listCart",
		qs.stringify({
		  userId: user.userId,
		  businessId: businessId,
		})
	  )
	  .then((response) => {
		cartArr.value = response.data;
	  })
	  .catch((error) => {
		console.error(error);
	  });
  };
  init();
  
  const toUserAddress = () => {
	router.push({
	  path: "/userAddress",
	  query: { businessId: businessId },
	});
  };
  
  const toPayment = () => {
	if (deliveryaddress == null) {
	  alert("请选择送货地址！");
	  return;
	}
  
	//创建订单
	axios
	  .post(
		"OrdersController/createOrders",
		qs.stringify({
		  userId: user.userId,
		  businessId: businessId,
		  daId: deliveryaddress.daId,
		  orderTotal: totalPrice.value
		})
	  )
	  .then((response) => {
		let orderId = response.data;
		if (orderId > 0) {
		  router.push({ path: "/payment", query: { orderId: orderId } });
		} else {
		  alert("创建订单失败！");
		}
	  })
	  .catch((error) => {
		console.error(error);
	  });
  };
  </script>
  
  <style scoped>
  /****************** 总容器 ******************/
  .wrapper {
	width: 100%;
	height: 100%;
  }
  
  /****************** header部分 ******************/
  .wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097ff;
	color: #fff;
	font-size: 4.8vw;
  
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
  
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  /****************** 订单信息部分 ******************/
  .wrapper .order-info {
	/*注意这里，不设置高，靠内容撑开。因为地址有可能折行*/
	width: 100%;
	margin-top: 12vw;
	background-color: #0097ef;
	box-sizing: border-box;
	padding: 2vw;
	color: #fff;
  }
  
  .wrapper .order-info h5 {
	font-size: 3vw;
	font-weight: 300;
  }
  
  .wrapper .order-info .order-info-address {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
  
	font-weight: 700;
	user-select: none;
	cursor: pointer;
	margin: 1vw 0;
  }
  
  .wrapper .order-info .order-info-address p {
	width: 90%;
	font-size: 5vw;
  }
  
  .wrapper .order-info .order-info-address i {
	font-size: 6vw;
  }
  
  .wrapper .order-info p {
	font-size: 3vw;
  }
  
  .wrapper h3 {
	box-sizing: border-box;
	padding: 3vw;
	font-size: 4vw;
	color: #666;
	border-bottom: solid 1px #ddd;
  }
  
  /****************** 订单明细部分 ******************/
  .wrapper .order-detailed {
	width: 100%;
  }
  
  .wrapper .order-detailed li {
	width: 100%;
	height: 16vw;
	box-sizing: border-box;
	padding: 3vw;
	color: #666;
  
	display: flex;
	justify-content: space-between;
	align-items: center;
  }
  
  .wrapper .order-detailed li .order-detailed-left {
	display: flex;
	align-items: center;
  }
  
  .wrapper .order-detailed li .order-detailed-left img {
	width: 10vw;
	height: 10vw;
  }
  
  .wrapper .order-detailed li .order-detailed-left p {
	font-size: 3.5vw;
	margin-left: 3vw;
  }
  
  .wrapper .order-detailed li p {
	font-size: 3.5vw;
  }
  
  .wrapper .order-deliveryfee {
	width: 100%;
	height: 16vw;
	box-sizing: border-box;
	padding: 3vw;
	color: #666;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 3.5vw;
  }
  
  /****************** 订单合计部分 ******************/
  .wrapper .total {
	width: 100%;
	height: 14vw;
  
	position: fixed;
	left: 0;
	bottom: 0;
  
	display: flex;
  }
  
  .wrapper .total .total-left {
	flex: 2;
	background-color: #505051;
	color: #fff;
	font-size: 4.5vw;
	font-weight: 700;
	user-select: none;
  
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  .wrapper .total .total-right {
	flex: 1;
	background-color: #38ca73;
	color: #fff;
	font-size: 4.5vw;
	font-weight: 700;
	user-select: none;
	cursor: pointer;
  
	display: flex;
	justify-content: center;
	align-items: center;
  }
  </style>